<!DOCTYPE html>
<html lang="zh" th:charset="utf-8" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <th:block th:include="include :: header('修改路桩')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <style>
        fieldset {
            padding: .1em .625em .75em;
            margin: 0 2px;
            border: 1px solid silver;
        }

        legend {
            padding: .1em;
            border: 0;
            width: auto;
        }

        .search-collapse, .select-table {
            margin-top: 1px;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="col-sm-12 search-collapse">
        <form id="formId">
            <div class="select-list">
                <ul>
                    <li>
                        <label>归属高速：</label>
                        <select class="form-control" id="highSpeedRoad" name="params[highSpeedRoadId]"
                                th:with="type=${highSpeedRoadList}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.name}"
                                    th:value="${dict.id}"></option>
                        </select>
                    </li>
                    <li>
                        <label>管养单位：</label>
                        <select class="form-control" id="managementUnit" name="params[managementUnitId]"
                                th:with="type=${managementUnitList}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.name}"
                                    th:value="${dict.id}"></option>
                        </select>
                    </li>
                    <li>
                        <label>归属路段：</label>
                        <select class="form-control" id="roadSection" name="params[roadSectionId]"
                                th:with="type=${roadSectionList}">
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.sectionName}"
                                    th:value="${dict.id}"></option>
                        </select>
                    </li>
                    <li class="select-time" style="display:none;">
                        <label>数据时间：</label>
                        <input class="time-input" id="startTime" name="params[beginDataTime]" placeholder="开始时间"
                               type="text"/>
                        <span>-</span>
                        <input class="time-input" id="endTime" name="params[endDataTime]" placeholder="结束时间"
                               type="text"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm"
                           onclick="$.table.search('formId','road_section');$.table.search('formId','road_information');$.table.search('formId','pavement_performance');$.table.search('formId','traffic_info');$.table.search('formId','climate_environment');$.table.search('formId','pavement_structure');$.table.search('formId','spatial_info');$.table.search('formId','pavement_materials');$.table.search('formId','road_linearity');$.table.search('formId','pavement_damage');$.table.search('formId','monitoring_data');"><i
                                class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset();clearSelect();"><i
                                class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <fieldset>
        <legend>所属路段</legend>
        <div class="btn-group-sm" id="toolbar_road_section" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="road:road_section:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()"
               shiro:hasPermission="road:road_section:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="road:road_section:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="road:road_section:import">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="road:road_section:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="road_section"></table>
        </div>
    </fieldset>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
    <!--所属路段的模块的数据-->
    var editFlag_road_section = [[${@permission.hasPermi('road:road_section:edit')}]];
    var removeFlag_road_section = [[${@permission.hasPermi('road:road_section:remove')}]];
    var prefix_road_section = ctx + "road/road_section";

    $(function () {
        var options = {
            id: "road_section",
            toolbar: "toolbar_road_section",
            url: prefix_road_section + "/list",
            //queryParams: queryRoadSectionParams,
            createUrl: prefix_road_section + "/add",
            updateUrl: prefix_road_section + "/edit/{id}",
            removeUrl: prefix_road_section + "/remove",
            exportUrl: prefix_road_section + "/export",
            importUrl: prefix_road_section + "/importData",
            importTemplateUrl: prefix_road_section + "/importTemplate",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "路段",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'sectionName',
                    title: '路段'
                },
                {
                    field: 'sectionId',
                    title: '编号'
                },
                {
                    field: 'rdHighSpeedRoad.name',
                    title: '归属高速'
                },
                {
                    field: 'rdManagementUnit.name',
                    title: '管养单位'
                },

                {
                    field: 'startName',
                    title: '起点'
                },
                {
                    field: 'endName',
                    title: '终点'
                },
                {
                    field: 'startPileNumber',
                    title: '起始桩号'
                },
                {
                    field: 'endPileNumber',
                    title: '结束桩号'
                },
                {
                    field: 'useTime',
                    title: '通车时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag_road_section + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag_road_section + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
</script>



<script>
    <!--    搜索模块的数据-->
    $("#highSpeedRoad,#managementUnit").on("select2:select", function (e) {
        var highSpeedRoad = $("#highSpeedRoad option:checked").val();//获取select的值
        var managementUnit = $("#managementUnit option:checked").val();//获取select的值
        var data = {
            rdHighSpeedRoad: {
                id: highSpeedRoad
            },
            rdManagementUnit: {
                id: managementUnit
            }
        };
        $.ajax({
            type: "post",
            url: "/road/road_section/selectRoadSection",
            data: JSON.stringify(data),
            dataType: "json",
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    result[i].text = result[i].sectionName;
                    result[i].id = result[i].id;
                }
                result.splice(0, 0, {text: '所有', id: ''});

                var jsonArray = JSON.stringify(result);
                var json = JSON.parse(jsonArray);
                $("#roadSection").empty();
                $("#roadSection").select2({
                    data: json
                });

            }
        });
    });

    function clearSelect() {
        $("#highSpeedRoad,#managementUnit,#roadSection").val(null).trigger("change");
    }

</script>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                <input type="checkbox" checked id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。">
                是否更新已经存在的用户数据
                &nbsp; <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i
                    class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</body>
</html>
